<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节点内容</title>
</head>
<body>
    <div id="app">
        <!-- <div class="houdunren" data="hd">houdunren.com</div>
        <div class="hdcms">hdcms.com</div> -->

        <button>houdunren.com</button>
        <img src="1.png" alt="">
    </div>

    <script>
        //节点内容
        //innerHTML
        //innerHTML用于向标签中添加html元素，同时触发浏览器的解析器重新绘制DOM
        //下例中使用innerHTML获取和设置div内容

        //innerHTML中只解析HTML标签语法,所以其中的script不会作为js进行处理
        // let app = document.querySelector('#app');
        // console.log(app.innerHTML);
        // app.innerHTML = '<h1>后盾人</h1>';

        //使用innerHTML操作会重绘元素，下面再点击第二次的时候就没有效果了
        //因为对#app的内容进行了重绘,即删除原来的内容然后设置新的内容
        //重绘后产生的button对象没有事件
        //重新绘制之后又产生了新的img对象，所以可以再控制台中可以看到新图片再加载
        // const app = document.querySelector('#app');
        // app.querySelector('button').addEventListener('click',function(){
        //     // alert(this.innerHTML);
        //     this.parentElement.innerHTML += '<hr/>向军大叔';
        // });

        
    </script>
</body>
</html>